<template>
  <div class="trends-chart">
    <div class="trends-chart__header">
      <div class="trends-chart__title" style="font-size: 20px">
        Customer Journey
      </div>
      <div class="trends-chart__controls">
        <el-checkbox
          v-for="city in cityOptions"
          :label="city"
          :key="city"
          class="trends-chart__checkbox"
          v-model="checkedCities"
          @change="handleCheckedCitiesChange(checkedCities)"
          >{{ city }}</el-checkbox
        >

        <div class="trends-chart__refresh-container">
          <el-dropdown class="trends-chart__refresh-dropdown" trigger="click">
            <!-- 触发图标 -->
            <img
              src="@/assets/fresh.png"
              alt="Refresh"
              class="trends-chart__refresh-icon"
            />

            <!-- 多选菜单 -->
            <el-dropdown-menu
              slot="dropdown"
              class="trends-chart__multi-select"
              style="font-family: 'Inter Variable', sans-serif"
            >
              <el-checkbox-group
                style="display: flex; flex-direction: column; padding: 0 10px"
                v-model="selectedServices"
                @change="handleServiceSelectionChange"
              >
                <el-checkbox
                  v-for="service in serviceOptions"
                  :label="service.value"
                  :key="service.label"
                  >{{ service.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- Chart display area -->
    <div class="trends-chart__graph">
      <PieChart :option="chartOptions" :height="'300px'"></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
import { fontChart } from "@/utils/echartPxToRem";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      cityAverageData: {
        "Avg of city": {
          name: "Avg of city",
          type: "line",
          symbol: "none",
          smooth: false,
          yAxisIndex: 0,
          lineStyle: {
            color: "#454545",
            width: 3,
            type: "dashed",
            dashOffset: 0,
            opacity: 1,
            dashArray: [15, 5],
          },
          data: [4, 4, 4, 4, 4, 4, 4, 4, 4],
        },
        "Avg of the competitors": {
          name: "Avg of the competitors",
          type: "line",
          symbol: "none",
          yAxisIndex: 0,
          lineStyle: {
            color: "#454545",
            width: 2,
            type: "dotted",
            dashOffset: 5,
            opacity: 0.9,
            dashArray: [1, 9],
          },
          data: [5, 5, 5, 5, 5, 5, 5, 5, 5],
        },
        "Avg of the portfolio": {
          name: "Avg of the portfolio",
          type: "line",
          symbol: "none",
          yAxisIndex: 0,
          lineStyle: {
            color: "#454545",
            width: 2,
            type: "dashed",
            dashOffset: 10,
            opacity: 0.9,
            dashArray: [5, 2, 1, 2],
          },
          data: [6, 6, 6, 6, 6, 6, 6, 6, 6],
        },
        "Avg of the brands": {
          name: "Avg of the brands",
          type: "line",
          symbol: "none",
          yAxisIndex: 0,
          lineStyle: {
            color: "#454545",
            width: 2.5,
            type: "dashed",
            dashArray: [4, 2], // 短虚线 + 小间隔
          },
          data: [8, 8, 8, 8, 8, 8, 8, 8, 8],
        },
      },
      cityOptions: [
        "Avg of city",
        "Avg of the competitors",
        "Avg of the portfolio",
        "Avg of the brands",
        "Previous Period",
      ],
      previousPeriodData: [
        {
          name: "Previous Period (Blue)",
          type: "line",
          symbol: "none",
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            color: "#0C3B7C",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [5, 4, 6, 5, 3, 4, 7, 6, 8],
        },
        {
          name: "Previous Period (Red)",
          type: "line",
          symbol: "none",
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            color: "#FF0000",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [4, 3, 5, 4, 2, 3, 6, 5, 7],
        },
        {
          name: "Previous Period (Yellow)",
          type: "line",
          symbol: "none",
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            color: "#FDDF1D",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [6, 5, 7, 6, 4, 5, 8, 7, 9],
        },
        {
          name: "Previous Period (purple)",
          type: "line",
          symbol: "none",
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            color: "#6D03A1",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [9, 5, 10, 9, 6, 10, 6, 3, 10],
        },
      ],
      // 新增：下拉菜单的多选数据
      serviceOptions: [
        { label: "Booking", value: "Booking" },
        { label: "Checkin", value: "Checkin" },
        { label: "Cleanness", value: "Cleanness" },
        { label: "Service", value: "Service" },
        { label: "Room", value: "Room" },
        { label: "Facilities", value: "Facilities" },
        { label: "F&B", value: "F&B" },
        { label: "Checkout", value: "CheckoutB" },
        { label: "Post saty", value: "Post saty" },
      ],
      selectedServices: [], // 存储选中的服务值
      timeSelect: "",
      showDropdown: false,
      clickTarget: null,
      checked: false,
      checkedCities: [],
      chartOptions: {
        subtitle: {
          text: "by scores",
        },
        grid: {
          left: "0%",
          right: "1%",
          bottom: "3%",
          top: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "Booking",
            "Checkin",
            "Cleanness",
            "Service",
            "Room",
            "Facilities",
            "F&B",
            "Checkout",
            "Post saty",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLabel: {
            margin: 20,
            color: "#6a6969",
            fontSize: fontChart(12),
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              inside: true,
              interval: 10,
            },
            axisLabel: {
              align: "right",
              margin: 16,
              color: "#6a6969",
              fontSize: 12,
              overflow: "truncate",
              fontWeight: 400,
            },
            name: "by scores",
            nameGap: 20,
            min: 1,
            max: 10,
            interval: 1,
            position: "left",
            splitLine: {
              show: false,
            },
            nameTextStyle: {
              fontSize: 14,
              fontWeight: 400,
              padding: [0, -2, 0, 0],
            },
          },
          {
            type: "value",
            name: "#of staff logs",
            nameGap: 20,
            min: 0,
            max: 100,
            offset: 30,
            interval: 10,
            position: "right",
            splitLine: {
              show: false,
            },
            axisLabel: {
              align: "right",
              color: "#030229",
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#030229",
              fontWeight: 400,
              align: "right",
              verticalAlign: "middle",
              rotate: 90,
              padding: [0, -7, 0, 0],
            },
          },
        ],
        emphasis: {
          lineStyle: {
            width: 4,
          },
        },
        series: [
          {
            name: "yellow",
            symbol: "none",
            smooth: true,
            symbolSize: 18,
            type: "line",
            data: [1, 2, 3, 4, 5, 4, 3, 1, 2],
            markPoint: {
              symbol: `image://${require("@/assets/yellow.png")}`,
              symbolSize: [18, 18],
              symbolOffset: [0, -15],
              data: [
                {
                  type: "max",
                  name: "最高点",
                },
              ],
              emphasis: {
                trigger: "none",
              },
              label: {
                show: false,
              },
            },
            yAxisIndex: 0,
            lineStyle: {
              color: "#FDDF1D",
              width: 2,
            },

            markArea: {
              itemStyle: {
                color: " rgba(247, 11, 11, 0.07)  ",
              },
              data: [
                [
                  {
                    xAxis: "Booking",
                    yAxis: 1,
                  },
                  {
                    xAxis: "Post saty",
                    yAxis: 7,
                  },
                ],
              ],
            },
          },
          {
            name: "red",
            type: "line",
            smooth: true,
            symbol: "none",
            data: [5, 5, 7, 4, 4, 3, 3, 3, 5],
            markPoint: {
              symbol: `image://${require("@/assets/hot.png")}`,
              symbolSize: [18, 18],
              symbolOffset: [0, -15],
              data: [
                {
                  type: "max",
                  name: "最高点",
                },
              ],
              emphasis: {
                trigger: "none",
              },
              label: {
                show: false,
              },
            },
            yAxisIndex: 0,
            lineStyle: {
              color: "#FF0000",
              width: 2,
            },

            markArea: {
              itemStyle: {
                color: " rgba(243, 176, 7, 0.08) ",
              },
              data: [
                [
                  {
                    xAxis: "Booking",
                    yAxis: 7,
                  },
                  {
                    xAxis: "Post saty",
                    yAxis: 8.5,
                  },
                ],
              ],
            },
          },
          {
            name: "Booking",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [3, 6, 8, 7, 4, 2, 3, 4, 5],
            markPoint: {
              symbol: `image://${require("@/assets/Booking.png")}`,
              symbolSize: [18, 18],
              symbolOffset: [0, -15],
              data: [
                {
                  type: "max",
                  name: "最高点",
                },
              ],
              emphasis: {
                trigger: "none",
              },
              position: [10, -15],
              label: {
                show: false,
              },
            },
            yAxisIndex: 0,
            lineStyle: {
              color: "#0C3B7C",
              width: 2,
            },

            markArea: {
              itemStyle: {
                color: "rgba(7, 240, 17, 0.08)  ",
              },
              data: [
                [
                  {
                    xAxis: "Booking",
                    yAxis: 8.5,
                  },
                  {
                    xAxis: "Post saty",
                    yAxis: 10,
                  },
                ],
              ],
            },
          },
          {
            name: "purple",
            symbol: "none",
            smooth: true,
            symbolSize: 18,
            type: "line",
            // markPoint: {
            //   symbol: `image://${require("@/assets/yellow.png")}`,
            //   symbolSize: [18, 18],
            //   symbolOffset: [0, -15],
            //   data: [
            //     {
            //       type: "max",
            //       name: "最高点",
            //     },
            //   ],
            //   emphasis: {
            //     trigger: "none",
            //   },
            //   label: {
            //     show: false,
            //   },
            // },
            data: [2, 4, 3, 5, 3, 5, 5, 2, 5],
            yAxisIndex: 0,
            lineStyle: {
              color: "#6d03a1",
              width: 2,
            },
          },
        ],
      },
    };
  },
  mounted() {
    document.addEventListener("click", this.handleOutsideClick);
    document.addEventListener("keydown", this.handleEscKey);
  },
  beforeUnmount() {
    document.removeEventListener("click", this.handleOutsideClick);
    document.removeEventListener("keydown", this.handleEscKey);
  },
  methods: {
    // 处理下拉菜单中的多选变化
    handleServiceSelectionChange(values) {
      console.log("选中的服务:", values);
      // 这里可以添加根据选中服务更新图表或其他逻辑
    },

    handlePlatformSelect(service) {
      console.log("选择的服务:", service);
      // 无需手动关闭菜单，Element UI自动处理
    },
    handleCheckedCitiesChange(checkedValues) {
      const avgOptions = checkedValues.filter(
        (option) => option !== "Previous Period"
      );
      const showHistory = checkedValues.includes("Previous Period");

      const originalSeriesNames = ["yellow", "red", "Booking", "purple"];
      const originalSeries = this.chartOptions.series.filter((series) =>
        originalSeriesNames.includes(series.name)
      );
      const avgSeries = Object.values(this.cityAverageData).filter((series) =>
        avgOptions.includes(series.name)
      );
      const historySeries = showHistory ? [...this.previousPeriodData] : [];
      const visibleSeries = [...originalSeries, ...avgSeries, ...historySeries];

      this.chartOptions = {
        ...this.chartOptions,
        series: visibleSeries,
      };

      console.log("预期的系列数量:", visibleSeries.length);
    },
  },
};
</script>

<style scoped lang="scss">
.trends-chart {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  padding: 16px 42px;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cdcccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);

  &__header {
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  &__title {
    font-size: 18px;
    font-weight: 600;
    color: #454545;
  }

  &__controls {
    display: flex;
    align-items: center;
  }

  &__checkbox {
    font-size: 14px;
    font-weight: 400;
    color: #232323;
    margin-right: 24px;
    white-space: nowrap;

    &:last-child {
      margin-right: 0;
    }

    ::v-deep .el-checkbox__inner {
      border: 1px solid #6a6969 !important;
    }
  }
  &__refresh {
    position: relative;
  }

  &__refresh {
    margin-left: 24px;
    cursor: pointer;
  }

  &__graph {
    width: 100%;
  }

  &__dropdown {
    position: absolute;
    top: 15px;
    right: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 50px;
  }
  ::v-deep .trends-chart__refresh-icon:hover {
    opacity: 0.8 !important;
    cursor: pointer;
  }
}
</style>
<!-- 在原有的 <style scoped lang="scss"> 之后新增 -->
<style lang="scss">
/* 全局样式：调整弹出层内多选框与文本的间距 */
.trends-chart__multi-select {
  /* 复选框图标与文本的间距 */
  .el-checkbox__input {
    margin-right: 15px !important;
    margin-top: 5px;
  }
}
.trends-chart__refresh-dropdown {
  width: 30px;
  height: 30px;
  img {
    width: 100%;
    height: 100%;
  }
}
.el-checkbox__label{
font-size: .0972rem;
}
</style>
